<template>
    <div
        id="Login"
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
    >
        <div class="login">
            <div class="lift">
                <img src="../assets/images/组 4810@3x.png" alt="" />
            </div>
            <div class="rigth">
                <p>翔瑞金融平台</p>
                <el-form
                    :model="ruleForm"
                    status-icon
                    :rules="rules"
                    ref="ruleForm"
                    label-width="40px"
                    class="demo-ruleForm"
                >
                    <el-form-item label="账号" prop="username">
                        <el-input
                            placeholder="请输入账号"
                            type="username"
                            v-model="ruleForm.username"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>
                    <el-form-item label="密码" prop="password">
                        <el-input
                            placeholder="请输入密码"
                            type="password"
                            v-model="ruleForm.password"
                            autocomplete="off"
                        ></el-input>
                    </el-form-item>

                    <el-form-item>
                        <el-button
                            type="primary"
                            @click="submitForm('ruleForm')"
                            >登录</el-button
                        >
                        <!-- <el-button @click="resetForm('ruleForm')"
                            >重置</el-button
                        > -->
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        // 账号验证
        var validateusername = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入账号"));
            } else {
                // if (this.ruleForm.username !== "") {
                //     this.$refs.ruleForm.validateField("username");
                // }
                callback();
            }
        };
        // 密码验证
        var validatepassword = (rule, value, callback) => {
            if (value === "") {
                callback(new Error("请输入密码"));
            } else {
                // if (this.ruleForm.password !== "") {
                //     this.$refs.ruleForm.validateField("password");
                // }
                callback();
            }
        };
        var checkAge = (rule, value, callback) => {
            if (!value) {
                return callback(new Error("年龄不能为空"));
            }
            setTimeout(() => {
                if (!Number.isInteger(value)) {
                    callback(new Error("请输入数字值"));
                } else {
                    if (value < 18) {
                        callback(new Error("必须年满18岁"));
                    } else {
                        callback();
                    }
                }
            }, 1000);
        };
        return {
            loading: false,
            ruleForm: {
                username: "",
                password: "",
                age: "",
            },
            rules: {
                username: [
                    // { required: true, message: "账号不能为空", trigger: "blur" },
                    // {
                    //     min: 2,
                    //     max: 5,
                    //     message: "长度在 2 到 5 个字符",
                    //     trigger: "blur",
                    // },
                    { validator: validateusername, trigger: "blur" },
                ],
                password: [
                    // {
                    //     min: 6,
                    //     max: 8,
                    //     message: "长度在 6 到 8 个字符",
                    //     trigger: "blur",
                    // },
                    { validator: validatepassword, trigger: "blur" },
                ],
                age: [{ validator: checkAge, trigger: "blur" }],
            },
        };
    },
    methods: {
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    // alert("submit!");
                    console.log(valid);
                    this.loading = true;
                    this.b();
                } else {
                    console.log("error submit!!");

                    return false;
                }
            });
        },
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
        b() {
            setTimeout(function () {
                this.loading = false;
            }, 3000);
        },
    },
};
</script>

<style lang="scss" scoped>
#Login {
    width: 100%;
    height: 100vh;
    background: url("../assets/images/beijing2.jpg") no-repeat;
    background-size: 100vw 100vh;
    position: relative;
    .login {
        width: 500px;
        height: 300px;
        background-color: #fff;
        border-radius: 10px;
        position: absolute;
        top: 50%;
        // left: 50%;
        // margin-left: -250px;
        margin-top: -150px;
        right: 80px;
        box-shadow: 0 0 10px 10px #3448fa;
        .lift {
            width: 180px;
            text-align: center;
            float: left;
            margin-left: 20px;
            // background-color: rgb(231, 228, 228);
            img {
                width: 160px;
                margin-top: 80px;
            }
        }
        .rigth {
            padding: 15px;
            float: right;
            padding-right: 30px;
            // background-color: rgb(235, 208, 208);
            p {
                font-size: 22px;
                text-align: center;
                margin-bottom: 20px;
                margin-top: 30px;
            }
            .el-form {
                .el-button {
                    width: 210px;
                    border-radius: 20px;
                }
                .el-input__inner {
                    border-color: #3448fa;
                }
            }
        }
    }
}
</style>